<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控件皮肤切换</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar{
            position: relative;
            padding-top:5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var map, layer,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";

        function addMap(){
            //初始化地图
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Navigation() ,
                    new SuperMap.Control.LayerSwitcher,
                    new SuperMap.Control.OverviewMap,
                new SuperMap.Control.Zoom()
            ]});
            //初始化图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});
            //监听图层信息加载完成事件
            layer.events.on({"layerInitialized":addLayer});
        }

        //异步加载图层
        function addLayer(){
            map.addLayer(layer);
            map.setCenter(new SuperMap.LonLat(0, 0), 1);
        }

        //切换LayerSwitcher OverviewMap Zoom Skin风格 系统提供白色和蓝色两种配色方案，系统默认为白色
        function changeSkin(){
            map.destroy();
            SuperMap.Control.SKIN = SuperMap.Control.SKIN === "BLUE"?"WHITE":"BLUE";
            addMap();
        }

    </script>
</head>
<body onLoad = "addMap()">
<div id="toolbar">
    <input type="button" class="btn" value="切换" onclick="changeSkin()" />
</div>
<div id = "map"></div>
</body>
</html>